
<html>
<head>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>订单统计</title>
    <link href="/resources/css/select.css" rel="stylesheet" type="text/css"/>
    <script language="JavaScript" src="/resources/js/jquery-1.11.1.min.js"></script>
    <script language="JavaScript" src="/resources/js/select-ui.min.js"></script>
    <script type="text/javascript" src="/resources/js/echarts.min.js"></script>
    <script type="text/javascript" src="/resources/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/resources/js/self.js?r=2"></script>

    <script type="text/javascript">
        $(function(){
            $(".select3").uedSelect({
                width:150
            });
        });
    </script>
    <style type="text/css">
        .chart{
            height:540px;
            width: 100%;
        }
    </style>
</head>
<body>

<div class="col-md-12">
    <div class="box-body" style="padding-bottom:10px;">
        <div class="row form-inline" style="margin-left: 20px;">

            <div class="form-group">
                <label>开始时间</label><input name="timeBegin"
                                          onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})"
                                          type="text"
                                          class="scinput form-data" style="width: 100px"/>
            </div>
            <div class="form-group">
                <label>结束时间</label><input name="timeEnd"
                                          onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})"
                                          type="text"
                                          class="scinput form-data " style="width: 100px"/>
            </div>
            <div class="form-group">
                <input type="radio" class="form-data" name="groupBy" value="day" checked> 天
                <input type="radio" class="form-data" name="groupBy" value="month" > 月
                <input type="radio" class="form-data" name="groupBy" value="quarterly"> 季度
                <input type="radio" class="form-data" name="groupBy" value="year"> 年
            </div>



          <!--  <div class="form-group">
                <label>总分类:</label>
                <select name="rootClazzId" id="rootClazzId" class="form-control form-data" >
                </select>
            </div>
            <div class="form-group">
                <label>分类:</label>
                <select name="clazzId" id="clazzId" class="form-control form-data" >
                </select>
            </div>-->
            <button type="button"  onclick="queryOrderStatistics()" class="btn btn-primary">查询</button>

        </div>
    </div>
    <div id="chart" class="chart">

    </div>
</div>


</body>
<script type="text/javascript">
    $(function () {
        var defualtDay = getFirstDatePreMonth();
        $("[name='startTime']").val(defualtDay);
        queryOrderStatistics();
    });
    function queryOrderStatistics() {
        var params = getPageDataByClass("form-data");
        params["groupBy"] =$("[name='groupBy']:checked").val();
        $.ajax({
            url:"/admin/statistics/queryOrderStatistics.do",
            data:params,
            dataType:'json',
            type:'post',
            success:function(data){

                if(data.success){
                    var list = data.data;
                    var xAxisData=new Array();
                    var seriesData = new Array();
                    $(list).each(function (i,item) {
                        xAxisData.push(item.groupBy);
                        seriesData.push(item.value);
                    });
                    buildChart(xAxisData,seriesData);
                }else{
                    alert(data.msg);
                }
            }
        });

    }

    function buildChart(xAxisData,seriesData) {
        var myChart = echarts.init(document.getElementById('chart'));
        var dataZoomStart =0;
        var dataZoomEnd =xAxisData.length<5?100:5*100/xAxisData.length;
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '新增商品趋势',
                left: '50%',
                textAlign: 'center'
            },

            legend: {
                right: 20,
                orient: 'vertical',
                data: ['商品个数']
            },
            grid: {
                bottom: 120
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                backgroundColor: 'rgba(245, 245, 245, 0.8)',
                borderWidth: 1,
                borderColor: '#ccc',
                padding: 10,
                textStyle: {
                    color: '#000'
                },

                extraCssText: 'width: 170px'
            },
            dataZoom: [
                {
                    show: true,
                    start: 0,
                    end: dataZoomEnd

                },
                {
                    type: 'inside',
                    start: 0,
                    end: dataZoomEnd

                }
            ],
            xAxis: {
                type: 'category',
                data: xAxisData,
                boundaryGap: false,
                splitLine: {
                    show: true,
                    interval: 'auto',
                    lineStyle: {
                        color: ['#D4DFF5']
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#609ee9'
                    }
                },
                axisLabel: {
                    interval:0,
                    rotate:-30,
                    margin: 10,
                    textStyle: {
                        fontSize: 14
                    }
                }
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: ['#D4DFF5']
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#609ee9'
                    }
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 14
                    }
                }
            },
            series: [{
                name: '订单金额',
                type: 'line',
                smooth: true,
                showSymbol: true,
                symbol: 'circle',
                symbolSize: 6,
                data: seriesData,

                itemStyle: {
                    normal: {
                        color: '#f7b851'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 3
                    }
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>
</html>
